<template>
  <div class="tab">
	  <a class="tabItem" href="" v-for="(value,index) in titles" @mouseenter="enter(index)" @mouseleave="leave(index)"
	  @click="change(index)" :class="{'active':enterIndex==index,'tabItem':true}">
	    {{value}}
	  </a>
  </div>
</template>

<script>
	import {getCurrentInstance} from "vue"
  export default{
    name:'',
    data(){
      return {
				activeIndex:0,
				enterIndex:0
      }
    },
	props:{
	  titles:{
	    type:Array,
	    default(){
	      return []
	    }
	  },
	  indexName:{
	  	type:String,
	  	default(){
				return ""
	  	}
	  },
		routes:{
			type:Array,
			default(){
			  return []
			}
		}
	},
    methods:{
      change(i){
				window.event.preventDefault()
				// if(this.routes.length){
					this.$router.push('/music/'+this.routes[i])
				// }
				// else{
					this.$store.state[this.indexName]=i
					this.$bus.emit('tabChange',this.indexName)
				// }
				this.activeIndex=i
      },
      enter(i){
      	this.enterIndex=i
      },
      leave(i){
      	this.enterIndex=this.activeIndex
      }
    },
    components:{
       
    },
		mounted() {
			const internalInstance = getCurrentInstance();  //当前组件实例
			const $bus = internalInstance.appContext.config.globalProperties.$bus;
		}
  }
</script>

<style scoped>
	.tab{
	  text-align: center;
	  font-size: var(--font-middle-size);
	}
	.tabItem{
	  display: inline-block;
		padding: 0 20px;
	  line-height: var(--small-height);
		border-right: 1px solid var(--font-grey);
	}
	.tabItem:nth-last-of-type(1){
		border-right: none;
	}
	.active{
	  color: var(--bcc-green);
	}
</style>
